<template>
  <div>
    <div class="shopping-cart">
      <h1>Shopping Cart - 测试版</h1>

      <!-- 商品列表 -->
      <div class="product-list">
        <!-- product 商品可以循环 ，将其封装出去 -->
        <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 1</h2>
            <p>$100.00</p>
            <div class="quantity">
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
          </div>
        </div>

        <div class="product">
          <img src="https://via.placeholder.com/100" alt="Product Image" />
          <div class="product-details">
            <h2>Product 2</h2>
            <p>$50.00</p>
            <div class="quantity">
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 购物车总结 -->
      <div class="cart-summary">
        <h3>Cart Summary</h3>
        <p>Total Items: <span>2</span></p>
        <p>Total Price: <span>$150.00</span></p>
        <button class="checkout-btn">Checkout</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">


</script>

<style lang="scss" scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-details h2 {
  margin: 0;
}

.product-details p {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* 数量调节按钮 */
.quantity {
  display: flex;
  align-items: center;
}

.quantity button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.quantity button:hover {
  background-color: #45a049;
}

.quantity input {
  width: 40px;
  text-align: center;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
